<template>
    <div>
        <!-- 为了不重复写 countStore 可以适当的结构程序 -->
        <h1> 去掉 countStore 之后 解构的展示 </h1>
        <h2> 当前求和为：{{ sum }}， 变大的和：{{ bigSum }} </h2>
        <!-- 啥操作？这里还可以直接转 -->
        <select v-model.number="n">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <button @click="addSum"> 加 </button>
        <button @click="delSum"> 减 </button>

        <h2> 地址:{{ address }} ，年龄:{{ age }}</h2>
        <h3>完整地址：{{ prefixAddress }}</h3>
        <h2> 团伙名称:{{ paterm }}</h2>
    </div>
</template>

<script lang="ts" setup name="Count">
import { ref } from 'vue';
import { useCountStore } from '@/store/conunt';
// const sum = ref(1)
const n = ref(1)
const countStore = useCountStore()



//使用 pinia 解构响应式
import { storeToRefs } from 'pinia'

//这里也可以直接取出 getter 中定义
const { sum, address, age, paterm ,bigSum,prefixAddress} = storeToRefs(countStore)

function addSum() {
    // 直接使用解构后的值
    sum.value += n.value,
        address.value = "红鼎国际",
        age.value = 25

    countStore.changePatermName(paterm.value)
}
function delSum() {

}



</script>

<style>
select,
button {
    margin-right: 10px;
    width: 50px;
}
</style>